import React from 'react';
import { Empty, Row, Col } from 'antd';
import { BarChartOutlined, FileTextOutlined, CodeOutlined, BugOutlined } from '@ant-design/icons';

interface StatisticsOverviewProps {
    statisticsData: any;
}

const StatisticsOverview: React.FC<StatisticsOverviewProps> = ({ statisticsData }) => {
    return (
        <div
            style={{
                background: '#ffffff',
                borderRadius: '12px',
                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
                border: '1px solid #e2e8f0',
                overflow: 'hidden',
                position: 'relative',
                marginTop: '20px'
            }}
        >
            {/* 装饰性背景图案 */}
            <div style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '4px',
                background: 'linear-gradient(90deg, #f59e0b 0%, #10b981 50%, #3b82f6 100%)'
            }} />

            <div style={{ padding: '16px' }}>
                {/* 标题区域 */}
                <div style={{
                    marginBottom: '12px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px'
                }}>
                    <div style={{
                        width: '32px',
                        height: '32px',
                        borderRadius: '8px',
                        background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        boxShadow: '0 2px 8px rgba(245, 158, 11, 0.25)'
                    }}>
                        <BarChartOutlined style={{
                            fontSize: '16px',
                            color: '#fff'
                        }} />
                    </div>
                    <div>
                        <h2 style={{
                            margin: 0,
                            fontSize: '16px',
                            fontWeight: '600',
                            color: '#1e293b',
                            lineHeight: '1.3'
                        }}>
                            统计概览信息
                        </h2>
                        <p style={{
                            margin: '2px 0 0 0',
                            fontSize: '12px',
                            color: '#64748b'
                        }}>
                            代码规模和技术栈分析
                        </p>
                    </div>
                </div>
                {statisticsData ? (
                    <>
                        {/* 统计指标卡片 - 全部放在一行 */}
                        <Row gutter={[8, 8]} style={{ marginBottom: 12 }}>
                            {/* 总文件数 */}
                            <Col span={8}>
                                <MetricCard
                                    value={statisticsData.totalFiles || 0}
                                    label="总文件数"
                                    icon={<FileTextOutlined />}
                                    gradient="linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"
                                    bgGradient="linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"
                                    borderColor="rgba(59, 130, 246, 0.15)"
                                />
                            </Col>

                            {/* 总代码行数 */}
                            <Col span={8}>
                                <MetricCard
                                    value={(statisticsData.totalLines || 0).toLocaleString()}
                                    label="总代码行数"
                                    icon={<CodeOutlined />}
                                    gradient="linear-gradient(135deg, #10b981 0%, #059669 100%)"
                                    bgGradient="linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%)"
                                    borderColor="rgba(16, 185, 129, 0.15)"
                                />
                            </Col>

                            {/* 有效代码行数 */}
                            <Col span={8}>
                                <MetricCard
                                    value={(statisticsData.totalCodeLines || 0).toLocaleString()}
                                    label="有效代码行数"
                                    icon={<CodeOutlined />}
                                    gradient="linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"
                                    bgGradient="linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%)"
                                    borderColor="rgba(139, 92, 246, 0.15)"
                                />
                            </Col>
                        </Row>

                        {/* PMD代码质量指标 */}
                        <div style={{ marginBottom: '12px' }}>
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                gap: '8px',
                                marginBottom: '12px'
                            }}>
                                <div style={{
                                    width: '24px',
                                    height: '24px',
                                    borderRadius: '6px',
                                    background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    boxShadow: '0 2px 6px rgba(239, 68, 68, 0.25)'
                                }}>
                                    <BugOutlined style={{
                                        color: '#ffffff',
                                        fontSize: '12px'
                                    }} />
                                </div>
                                <h3 style={{
                                    margin: 0,
                                    fontSize: '14px',
                                    fontWeight: '600',
                                    color: '#1e293b'
                                }}>
                                    PMD代码质量指标
                                </h3>
                            </div>

                            <Row gutter={[10, 10]}>
                                <Col span={8}>
                                    <QualityMetricCard
                                        value={statisticsData.avgCyclomaticComplexity ?
                                            statisticsData.avgCyclomaticComplexity.toFixed(2) : '0.00'}
                                        label="平均圈复杂度"
                                        bgGradient="linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%)"
                                        borderColor="rgba(239, 68, 68, 0.15)"
                                    />
                                </Col>

                                <Col span={8}>
                                    <QualityMetricCard
                                        value={statisticsData.maxCyclomaticComplexity || 0}
                                        label="最大圈复杂度"
                                        bgGradient="linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)"
                                        borderColor="rgba(245, 158, 11, 0.15)"
                                    />
                                </Col>

                                <Col span={8}>
                                    <QualityMetricCard
                                        value={`${statisticsData.duplicationPercentage ?
                                            statisticsData.duplicationPercentage.toFixed(1) : '0.0'}%`}
                                        label="代码重复率"
                                        bgGradient="linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%)"
                                        borderColor="rgba(6, 182, 212, 0.15)"
                                    />
                                </Col>
                            </Row>
                        </div>
                    </>
                ) : (
                    <div style={{
                        textAlign: 'center',
                        padding: '80px',
                        background: 'rgba(248, 250, 252, 0.5)',
                        borderRadius: '16px',
                        border: '2px dashed rgba(148, 163, 184, 0.3)'
                    }}>
                        <Empty
                            description={
                                <span style={{
                                    color: '#64748b',
                                    fontSize: '16px',
                                    fontWeight: '500'
                                }}>
                                    暂无统计数据
                                </span>
                            }
                        />
                    </div>
                )}
            </div>
        </div>
    );
};

// 指标卡片组件
const MetricCard: React.FC<{
    value: string | number;
    label: string;
    icon: React.ReactNode;
    gradient: string;
    bgGradient: string;
    borderColor: string;
}> = ({ value, label, icon, gradient, bgGradient, borderColor }) => {
    return (
        <div style={{
            textAlign: 'center',
            padding: '10px 8px',
            background: bgGradient,
            borderRadius: '10px',
            border: `1px solid ${borderColor}`,
            transition: 'all 0.2s ease'
        }}
            onMouseEnter={(e) => {
                (e.currentTarget as HTMLElement).style.transform = 'translateY(-2px)';
                (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.12)';
            }}
            onMouseLeave={(e) => {
                (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
                (e.currentTarget as HTMLElement).style.boxShadow = 'none';
            }}
        >
            <div style={{
                width: '32px',
                height: '32px',
                borderRadius: '8px',
                background: gradient,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0 auto 10px auto',
                boxShadow: '0 4px 10px rgba(0, 0, 0, 0.25)'
            }}>
                {React.isValidElement(icon) ? React.cloneElement(icon, {
                    style: { color: '#ffffff', fontSize: '16px' }
                } as any) : icon}
            </div>
            <div style={{
                fontSize: '22px',
                fontWeight: '700',
                color: '#1e293b',
                marginBottom: '4px',
                lineHeight: 1
            }}>
                {value}
            </div>
            <div style={{
                color: '#64748b',
                fontSize: '12px',
                fontWeight: '500'
            }}>
                {label}
            </div>
        </div>
    );
};

// 质量指标卡片组件
const QualityMetricCard: React.FC<{
    value: string | number;
    label: string;
    bgGradient: string;
    borderColor: string;
}> = ({ value, label, bgGradient, borderColor }) => {
    return (
        <div style={{
            textAlign: 'center',
            padding: '10px 8px',
            background: bgGradient,
            borderRadius: '10px',
            border: `1px solid ${borderColor}`
        }}>
            <div style={{
                fontSize: '22px',
                fontWeight: '700',
                color: '#1e293b',
                marginBottom: '4px',
                lineHeight: 1
            }}>
                {value}
            </div>
            <div style={{
                color: '#64748b',
                fontSize: '12px',
                fontWeight: '500'
            }}>
                {label}
            </div>
        </div>
    );
};

export default StatisticsOverview;
